<template>
  <bottomChartContent title="客服及投诉情况">
    <div id="complainContainer">
      <table cellpadding="6" cellspacing="0">
        <thead>
          <th v-for="item in headData" :key="item">
            {{ item }}
          </th>
        </thead>
        <tbody>
          <tr v-for="item in bodyData" :key="item.type">
            <td>{{ item.type }}</td>
            <td>{{ item.product }}</td>
            <td>{{ item.afterSales }}</td>
            <td>{{ item.logistics }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </bottomChartContent>
</template>

<script setup>
import { onMounted, ref, reactive } from "vue";
import bottomChartContent from "../baseComponent/bottomChartContent.vue";
import { complainData } from "@/request/product";

const headData = reactive(["产品", "售后", "物流"]);
const bodyData = ref([]);

onMounted(async () => {
  let {
    data: { data: complainDataRes },
  } = await complainData();
  headData.unshift(complainDataRes.date);
  bodyData.value = complainDataRes.list;
});
</script>

<style lang="less" scoped>
#complainContainer {
  width: 100%;
  height: 100%;
  table {
    width: 90%;
    margin: 60px auto;
    font-size: 36px;
    color: #fff;
    th, td {
      text-align: center;
      border: 1px solid #006699;
      height: 80px;
    }
  }
}
</style>
